<template>
  <div class="memory-techniques-page">
    <!-- 头部导航 -->
    <header class="header">
      <div class="container">
        <h1 class="logo">WordMaster</h1>
        <nav class="nav">
          <router-link to="/Home">首页</router-link>
          <router-link to="/Forum">论坛</router-link>
          <router-link to="/MemorizationSkills">记忆技巧</router-link>
          <router-link to="/LearningResources">学习资源</router-link>
        </nav>
        <div class="user-actions">
          <button @click="toggleTheme" class="theme-btn">
            <span v-if="theme === 'light'">🌙 暗黑模式</span>
            <span v-else>☀️ 明亮模式</span>
          </button>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="main-content">
      <div class="container">
        <!-- 搜索和筛选 -->
        <div class="search-filter">
          <div class="search-box">
            <input type="text" placeholder="搜索记忆技巧..." v-model="searchQuery" @keyup.enter="searchTechniques">
            <button class="search-btn" @click="searchTechniques">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </button>
          </div>
          <div class="filter-tags">
            <button v-for="tag in tags" :key="tag.id" :class="['tag', { 'active': activeTag === tag.id }]"
              @click="filterByTag(tag.id)">
              {{ tag.name }}
            </button>
          </div>
        </div>

        <!-- 记忆技巧列表 -->
        <div class="techniques-list">
          <div v-for="technique in filteredTechniques" :key="technique.id" class="technique-card"
            @click="selectTechnique(technique)">
            <div class="card-header">
              <h3>{{ technique.title }}</h3>
              <span class="difficulty" :class="technique.difficulty">
                {{ technique.difficulty }}
              </span>
            </div>
            <p class="description">{{ technique.description }}</p>
            <div class="card-footer">
              <div class="tags">
                <span v-for="tag in technique.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
              <button class="btn btn-icon" @click.stop="toggleFavorite(technique.id)">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path
                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
                    :fill="technique.isFavorite ? '#ff4757' : 'none'"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>

        <!-- 分页控制 -->
        <div class="pagination" v-if="totalPages > 1">
          <button class="page-btn" :disabled="currentPage === 1" @click="prevPage">
            上一页
          </button>
          <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
          <button class="page-btn" :disabled="currentPage === totalPages" @click="nextPage">
            下一页
          </button>
        </div>
      </div>
    </main>

    <!-- 技巧详情模态框 -->
    <div class="modal-overlay" v-if="selectedTechnique" @click.self="selectedTechnique = null">
      <div class="modal-content">
        <button class="close-btn" @click="selectedTechnique = null">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
        <h2>{{ selectedTechnique.title }}</h2>
        <div class="meta-info">
          <span class="difficulty" :class="selectedTechnique.difficulty">
            {{ selectedTechnique.difficulty }}
          </span>
          <span class="views">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
              <circle cx="12" cy="12" r="3"></circle>
            </svg>
            {{ selectedTechnique.views }} 次浏览
          </span>
        </div>
        <div class="technique-content">
          <h3>技巧说明</h3>
          <p>{{ selectedTechnique.content }}</p>

          <h3>应用示例</h3>
          <div class="examples">
            <div v-for="example in selectedTechnique.examples" :key="example.word" class="example">
              <div class="word-example">
                <strong>{{ example.word }}</strong> - {{ example.meaning }}
              </div>
              <p>{{ example.explanation }}</p>
            </div>
          </div>
        </div>
        <div class="action-buttons">
          <button class="btn btn-primary" @click="startPractice(selectedTechnique.id)">
            立即练习
          </button>
          <button class="btn btn-outline" @click="shareTechnique(selectedTechnique.id)">
            分享技巧
          </button>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h4>关于WordMaster</h4>
            <p>WordMaster是一个专业的单词记忆平台，帮助您高效学习外语词汇。</p>
          </div>
          <div class="footer-section">
            <h4>快速链接</h4>
            <ul>
              <router-link to="/Home">首页</router-link>
              <router-link to="/Forum">论坛</router-link>
              <router-link to="/MemorizationSkills">记忆技巧</router-link>
              <router-link to="/LearningResources">学习资源</router-link>
            </ul>
          </div>
          <div class="footer-section">
            <h4>联系我们</h4>
            <p>email: contact@wordmaster.com</p>
            <p>电话: 123-456-7890</p>
          </div>
        </div>
        <div class="copyright">
          <p>&copy; 2023 WordMaster. 保留所有权利。</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

import { inject } from 'vue'

// 主题切换功能
const theme = inject('theme')
const setTheme = inject('setTheme')

const toggleTheme = () => {
  if (theme.value === 'light') {
    theme.value = 'dark';
  } else {
    theme.value = 'light';
  }
}


// 搜索查询
const searchQuery = ref('')

// 标签筛选
const tags = ref([
  { id: 'all', name: '全部' },
  { id: 'association', name: '联想记忆' },
  { id: 'root', name: '词根词缀' },
  { id: 'image', name: '图像记忆' },
  { id: 'story', name: '故事记忆' },
  { id: 'mnemonic', name: '助记符' }
])
const activeTag = ref('all')

// 分页
const currentPage = ref(1)
const itemsPerPage = ref(6)
const totalPages = computed(() => Math.ceil(filteredTechniques.value.length / itemsPerPage.value))

// 记忆技巧数据
const techniques = ref([
  {
    id: 1,
    title: '词根词缀记忆法',
    description: '通过分析单词的词根和词缀来记忆单词，适用于大部分拉丁语源的词汇。',
    difficulty: 'medium',
    tags: ['词根词缀', '学术'],
    isFavorite: false,
    views: 1245,
    content: '词根词缀记忆法是通过分析单词的组成部分来记忆单词的方法。许多英语单词由词根、前缀和后缀组成。例如，"unhappiness"可以分解为：un-（前缀，表示否定）+ happy（词根）+ -ness（后缀，表示名词）。',
    examples: [
      {
        word: 'unhappiness',
        meaning: '不幸福',
        explanation: 'un- (不) + happy (幸福) + -ness (名词后缀) = 不幸福'
      },
      {
        word: 'predict',
        meaning: '预测',
        explanation: 'pre- (前) + dict (说) = 提前说 → 预测'
      }
    ]
  },
  {
    id: 2,
    title: '联想记忆法',
    description: '将新单词与已知事物或形象联系起来，创造有趣的联想帮助记忆。',
    difficulty: 'easy',
    tags: ['联想记忆', '趣味'],
    isFavorite: true,
    views: 987,
    content: '联想记忆法是将新单词与你已经熟悉的事物、形象或情境联系起来的方法。这种方法特别适合具体名词和动词。创造生动、夸张甚至荒谬的联想会更容易记住。',
    examples: [
      {
        word: 'pest',
        meaning: '害虫',
        explanation: '联想："拍死它" → 害虫需要被拍死'
      },
      {
        word: 'ambulance',
        meaning: '救护车',
        explanation: '联想："俺不能死" → 救护车来了'
      }
    ]
  },
  {
    id: 3,
    title: '图像记忆法',
    description: '将单词转化为生动的图像或场景，利用视觉记忆来加深印象。',
    difficulty: 'easy',
    tags: ['图像记忆', '视觉'],
    isFavorite: false,
    views: 756,
    content: '图像记忆法是将单词转化为生动的图像或场景来帮助记忆。人类大脑对图像的记忆能力远强于文字，因此这种方法非常有效。你可以为每个单词创造一个独特的视觉形象，或者将多个单词编成一个连贯的画面。',
    examples: [
      {
        word: 'apple',
        meaning: '苹果',
        explanation: '想象一个闪闪发光的红苹果从树上掉下来，砸在牛顿头上'
      },
      {
        word: 'diligent',
        meaning: '勤奋的',
        explanation: '想象一只蜜蜂(di)在烈日(li)下给(gent)花朵授粉，非常勤奋'
      }
    ]
  },
  {
    id: 4,
    title: '故事记忆法',
    description: '将多个单词编入一个有趣的故事中，通过情节来记忆单词。',
    difficulty: 'medium',
    tags: ['故事记忆', '趣味'],
    isFavorite: false,
    views: 654,
    content: '故事记忆法是将需要记忆的单词编入一个连贯的故事中。这种方法特别适合一次记忆多个相关单词。故事越有趣、越离奇，记忆效果越好。你可以自己创造故事，也可以使用现有的记忆材料。',
    examples: [
      {
        word: 'abandon, balcony, candle',
        meaning: '放弃，阳台，蜡烛',
        explanation: '故事：他abandon(放弃)了站在balcony(阳台)上吹灭candle(蜡烛)的尝试，因为风太大了。'
      }
    ]
  },
  {
    id: 5,
    title: '音标记忆法',
    description: '利用单词发音与中文的谐音关系来记忆单词。',
    difficulty: 'easy',
    tags: ['谐音', '发音'],
    isFavorite: true,
    views: 543,
    content: '音标记忆法是通过单词发音与中文的谐音关系来记忆单词的方法。这种方法特别适合初学者和记忆具体名词。需要注意的是，这种方法只能作为辅助，不能完全依赖发音来记忆单词的正确拼写。',
    examples: [
      {
        word: 'coffee',
        meaning: '咖啡',
        explanation: '发音直接对应"咖啡"'
      },
      {
        word: 'tank',
        meaning: '坦克',
        explanation: '发音类似"坦克"'
      }
    ]
  },
  {
    id: 6,
    title: '分类记忆法',
    description: '将单词按主题、词性或其他特征分类记忆，建立知识网络。',
    difficulty: 'hard',
    tags: ['分类', '系统'],
    isFavorite: false,
    views: 432,
    content: '分类记忆法是将单词按照某种逻辑关系进行分类整理的方法。你可以按主题(如动物、植物、职业)、词性(名词、动词、形容词)、词义关系(同义词、反义词)等方式分类。这种方法有助于建立单词之间的关联，形成知识网络。',
    examples: [
      {
        word: 'fruit category',
        meaning: '水果类别',
        explanation: 'apple, banana, orange, grape, peach等归为一类'
      },
      {
        word: 'emotions',
        meaning: '情绪词汇',
        explanation: 'happy, sad, angry, excited, nervous等归为一类'
      }
    ]
  }
])

// 选中的技巧
const selectedTechnique = ref(null)

// 过滤后的技巧列表
const filteredTechniques = computed(() => {
  let result = techniques.value

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(t =>
      t.title.toLowerCase().includes(query) ||
      t.description.toLowerCase().includes(query) ||
      t.tags.some(tag => tag.toLowerCase().includes(query))
    )
  }

  // 标签过滤
  if (activeTag.value !== 'all') {
    result = result.filter(t => t.tags.includes(activeTag.value))
  }

  return result
})

// 分页后的技巧列表
const paginatedTechniques = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value
  const end = start + itemsPerPage.value
  return filteredTechniques.value.slice(start, end)
})

// 搜索技巧
const searchTechniques = () => {
  currentPage.value = 1
}

// 按标签筛选
const filterByTag = (tagId) => {
  activeTag.value = tagId
  currentPage.value = 1
}

// 切换收藏状态
const toggleFavorite = (id) => {
  const index = techniques.value.findIndex(t => t.id === id)
  if (index !== -1) {
    techniques.value[index].isFavorite = !techniques.value[index].isFavorite
  }
}

// 选择技巧查看详情
const selectTechnique = (technique) => {
  selectedTechnique.value = technique
  // 增加浏览次数
  technique.views++
}

// 开始练习
const startPractice = (id) => {
  alert(`开始练习技巧ID: ${id}`)
  selectedTechnique.value = null
}

// 分享技巧
const shareTechnique = (id) => {
  alert(`分享技巧ID: ${id}`)
}

// 分页控制
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
}

// 初始化
onMounted(() => {
  // 可以在这里添加API调用获取数据
})
</script>

<style scoped>
/* 基础样式 */
.memory-techniques-page {
  --primary-color: #4a6da7;
  --secondary-color: #8e8e8e;
  --accent-color: #4895ef;
  --danger-color: #ff6b6b;
  --success-color: #66bb6a;
  --light-color: #e0e0e0;
  --dark-color: #1a1a1a;
  --gray-color: #a0aec0;
  --light-gray: #2d3748;
  --border-radius: 8px;
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

a {
  text-decoration: none;
  color: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  outline: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--secondary-color);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.btn-outline:hover {
  background-color: var(--primary-color);
  color: white;
}

.btn-icon {
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--gray-color);
}

.btn-icon:hover {
  color: var(--danger-color);
}

/* 头部样式 */
.header {
  background-color: var(--bg-color);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 15px 0;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
}

.nav {
  display: flex;
  gap: 30px;
}

.nav a {
  padding: 8px 0;
  position: relative;
  font-weight: 500;
  color: var(--text-color);
}

.nav a.active {
  color: var(--primary-color);
}

.nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);

}

.user-actions {
  display: flex;
  gap: 15px;
}

/* 主要内容样式 */
.main-content {
  background-color: var(--bg-color);
  padding: 40px 0;
}

.search-filter {
  margin-bottom: 30px;
}

.search-box {
  display: flex;
  margin-bottom: 20px;
  max-width: 500px;
}

.search-box input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  outline: none;
  font-size: 16px;
  transition: var(--transition);
  background-color: var(--card-bg);
  color: var(--text-color);
}

.search-box input:focus {
  border-color: var(--primary-color);
}

.search-btn {
  padding: 0 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  cursor: pointer;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  padding: 6px 12px;
  background-color: var(--card-bg);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.tag.active {
  background-color: var(--primary-color);
  color: white;
}

/* 技巧卡片样式 */
.techniques-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.technique-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: pointer;
  color: var(--text-color);
}

.technique-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.card-header h3 {
  font-size: 18px;
  margin-right: 10px;
}

.difficulty {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.difficulty.easy {
  background-color: rgba(76, 201, 240, 0.1);
  color: var(--correct-color);
}

.difficulty.medium {
  background-color: rgba(247, 37, 133, 0.1);
  color: var(--wrong-color);
}

.difficulty.hard {
  background-color: rgba(67, 97, 238, 0.1);
  color: var(--primary-color);
}

.description {
  color: var(--gray-color);
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-footer .tags {
  display: flex;
  gap: 8px;
}

.card-footer .tag {
  font-size: 12px;
  padding: 4px 10px;
  background-color: rgba(108, 117, 125, 0.1);
  color: var(--gray-color);
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.page-btn {
  padding: 8px 16px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-btn:not(:disabled):hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.page-info {
  font-size: 14px;
  color: var(--gray-color);
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 30px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow);
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--gray-color);
  padding: 5px;
}

.modal-content h2 {
  margin-bottom: 15px;
  color: var(--primary-color);
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.views {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--gray-color);
}

.technique-content h3 {
  margin: 20px 0 10px;
  color: var(--primary-color);
}

.examples {
  margin-top: 15px;
}

.example {
  background-color: var(--light-gray);
  padding: 15px;
  border-radius: var(--border-radius);
  margin-bottom: 10px;
}

.word-example {
  margin-bottom: 8px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

/* 页脚样式 */
.footer {
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: 50px 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section h4 {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--light-color);
}

.footer-section p {
  margin-bottom: 10px;
  color: var(--light-gray);
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section a:hover {
  color: var(--accent-color);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gray-color);
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header .container {
    flex-direction: column;
    gap: 15px;
  }

  .nav {
    gap: 15px;
  }

  .techniques-list {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

.theme-btn {
  background-color: var(--card-bg);
  border: none;
  color: var(--text-color);
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s;
}

.theme-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
</style>
